<template>
    <view class="parallel_container">
        <cu-custom bgColor="bg-blue" :isBack="true">
            <block slot="backText"></block>
            <block slot="content">
                <text class="nav-title nav-title-selected"></text>
            </block>
        </cu-custom>
        <addressSearchFixed ref="setAddres" @inputPhone="kongInput"  @searchBtn='event_clickSearchBtn' :isShowAddress="false"></addressSearchFixed>
        <view class='newEnergy-backgourd' :style="[{marginTop: SeachBar + 'px'}]"></view>
        <view class="newCar-page__content" v-for="(item,index) in VehicleSeries" :key='item.id' v-if="VehicleSeries.length > 0">
			 <view class='newEnergy-title'> 
				 {{item.name}}
			 </view>
			 <view class="newEnergy-content">
			 	<view class='newEnergy-content-title'>
					
					 <view class='newEnergy-content-box' @click='detailVehicleSeries(it)' v-for="(it,i) in item.children" :key='it.id'>
						 <view class='newEnergy-content-left'>{{it.name}}</view>
						 <view class='newEnergy-content-right'>{{it.num == undefined ? '0' : it.num}}条<text class='icon-right'>></text></view>
					 </view>

						
				</view>
			 </view>
		</view>
		 <view v-if="VehicleSeries.length == 0" class="empty">
			<image src="@/static/empty.png"></image>
		  </view>
    </view>
</template>
<script>
import cuCustom from "@/components/custom-nav/cu-custom.vue";
import addressSearchFixed from "@/components/addressSearch/addressSearchFixed.vue";
import { getParallelImportVehicleSeries } from "@/api/newEnergy.js";
export default {
    components:{
        cuCustom,
        addressSearchFixed
    },
     data() {
        return {
            SeachBar: this.SeachBar,
            VehicleSeries:[],
			SearchVal:'',
			objSet:{}
        }
     },
     onLoad(options) {
        console.log(options)
		this.objSet = options
        this.ParallelImportVehicleSeries(options)
     },
     methods:{
		kongInput() {
			this.SearchVal = ''
			this.ParallelImportVehicleSeries(this.objSet)
		},
		event_clickSearchBtn(value) {
             console.log(value, '输入内容');
			 this.SearchVal = value
			 this.ParallelImportVehicleSeries(this.objSet)
		},
        ParallelImportVehicleSeries(items) {
			let obj = {
				brand_id:items.brand_id,
				search:this.SearchVal
			}
            getParallelImportVehicleSeries(obj).then(res => {
                console.log(res, 'getParallelImportVehicleSeries');
				this.VehicleSeries = res.data
            }).catch(err => {
                console.log(err);
            })
        },
        detailVehicleSeries(items) {
           console.log(items);
		   uni.navigateTo({
			  url:'/newEnergy/parallelImportCar/parallelImportCarList/parallelImportCarList?items=' + JSON.stringify(items)
		   })
        }
     }
}
</script>
<style lang="scss" scoped>
.parallel_container{
    width: 100%;
    height:100%;
  .newEnergy-backgourd{
			background-color: #fff;
			height: 30rpx;
	   }
    .newCar-page__content{
			// height: 100vh;
			/* 父元素设置相对定位 */
			position: relative;
			// background-color: #F7F8FA;
            margin-top:20rpx;
			.newEnergy-title{
				height: 44rpx;
				background: #F7F8FA;
				line-height:44rpx;
				padding-left:20rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			.newEnergy-content{
				background: #fff;
				
				.newEnergy-content-title{
					padding:0rpx 23rpx; 
					.newEnergy-content-box{
					    height: 100rpx;
						border-bottom:2rpx solid #F9F9F9;
						display: flex;
						justify-content: space-between;
						.newEnergy-content-left{
					
						   line-height:100rpx;
						
						   height: 27rpx;
						   font-size: 28rpx;
						   font-family: PingFang SC;
						   font-weight: 500;
						   color: #000000;
						}
						.newEnergy-content-right{
						
						   line-height:100rpx;
						   .icon-right{
							   width: 13rpx;
							   height: 16rpx;
							   font-size: 30rpx;
							   font-family: PingFang SC;
							   font-weight: 500;
							   color: #666666;
							   padding-left:10rpx;
						   }
						}
					}
					// .newEnergy-content-line{
					// 	height: 1rpx;
					// 	background: #F9F9F9;
					// }
					
				}
				
				
			}
		}
}
.empty {
  display: flex;
  justify-content: center;
  image {
    margin-top: 360rpx;
  }
}
</style>